<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div{
			width: 300px;
			height: 300px;
			display: none;
		}
		#div1{
			background-color: red;
		}
		#div2{
			background-color: green;
		}
		#div3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<input type="button" value="hong">
	<input type="button" value="lv">
	<input type="button" value="lan">
	
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</body>
<script>
	var btn = document.getElementsByTagName('input');
	// alert(btn.length);
	var Div = document.getElementsByTagName('div');
	// alert(Div.length);
	for(var i=0;i<btn.length;i++){
		btn[i].index = i;
        btn[i].onclick = function(){
        	for(var j=0;j<btn.length;j++){
        		Div[j].style.display = 'none';
        	}
		    Div[this.index].style.display = 'block';
	}
}
</script>
</html>














